<!DOCTYPE html>
<html lang="cmn-hans">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/reset.css" />
    <title>京东左侧导航栏练习</title>
    <style>
      html {
        background-color: #e3e4e5;
      }
      .left-list {
        padding: 10px 0;
        height: 450px;
        width: 190px;
        background-color: #fefefe;
        color: #636363;
        margin: 20px 50px;
      }

      .left-list .item {
        height: 25px;
        line-height: 25px;
        padding-left: 18px;
      }

      .left-list .item:hover {
        background-color: #d9d9d9;
      }

      .left-list .item a {
        font-size: 14px;
        color: #333;
      }

      .left-list .item a:not(:last-child)::after {
        content: "/";
        font-size: 12px;
        padding: 0 2px;
      }

      .left-list .item a:hover {
        color: #c81623;
      }
    </style>
  </head>
  <body>
    <nav class="left-list"></nav>

    <script>
      const navLists = [
        "家用电器",
        "手机,运营商,数码",
        "电脑,办公",
        "家居,家具,家装,厨具",
        "男装,女装,童装,内衣",
        "美妆,个人清洁,宠物",
        "女鞋,箱包,钟表,珠宝",
        "男鞋,运动,户外",
        "房产,汽车,汽车用品",
        "母婴,玩具乐器",
        "食品,酒类,生鲜,特产",
        "艺术,礼品鲜花,农艺园艺",
        "医药保健,计生情趣",
        "图书,文娱,教育,电子书",
        "机票,酒店,旅游,生活",
        "支付,白条,保险,企业金融",
        "安装,维修,清洗,二手",
        "工业品,元器件"
      ];

      const navDom = document.querySelector(".left-list");

      const frag = document.createDocumentFragment();
      navLists.forEach(ele => {
        const aLists = ele.split(",");
        const div = document.createElement("div");
        div.classList.add("item");
        createAList(aLists, div);
        frag.appendChild(div);
      });

      navDom.appendChild(frag);

      function createAList(aLists, div) {
        const aFrag = document.createDocumentFragment();
        aLists.forEach(ele => {
          const a = document.createElement("a");
          a.href = "#";
          a.textContent = ele;
          aFrag.appendChild(a);
        });
        div.appendChild(aFrag);
      }
    </script>
  </body>
</html>
